<template>
  <div>
    <input v-model="k" placeholder="Enter k value" />
    <input v-model="b" placeholder="Enter b value" />
    <button @click="fetchData">Draw Chart</button>
    <div ref="chart" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      k: 1,
      b: 0,
      chart: null
    };
  },
  methods: {
    fetchData() {
      fetch(`http://localhost:9090/line?k=${this.k}&b=${this.b}`)
        .then(response => response.json())
        .then(data => {
          this.drawChart(data.x, data.y);
        });
    },
    drawChart(x, y) {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart);
      }
      const option = {
        xAxis: {
          type: 'category',
          data: x
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: y,
          type: 'line'
        }]
      };
      this.chart.setOption(option);
    }
  }
};
</script>

<style scoped>
input {
  margin: 5px;
}
</style>